 <div id="page-wrapper">
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-header">PROJECT LIST</h1>
					
					<table id='projects' class='table table-bordered'>
						
					</table>
					
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /#page-wrapper -->
		
<script type='text/javascript'>
			$(function(){
		
	
				$('#projects').dataTable({
				"sPaginationType": "bootstrap",
				"bAutoWidth": false,
				"bProcessing": true,
				"bDestroy": true,
				"bRetrieve": false,
				"bDeferRender": true,
				"sAjaxSource": "get_project_view",
				"aaSorting"   : [[0,"desc"]],
				 "fnDrawCallback": function ( oSettings ) {
						for ( var i=0, iLen=oSettings.aiDisplay.length ; i<iLen ; i++ )
						{
							$('td:eq(0)', oSettings.aoData[ oSettings.aiDisplay[i] ].nTr ).html( i+1 );
						}
					
				},
				"fnRowCallback" : function(nRow, nData, index){
						$('td:eq(5)', nRow).html("<a id='id_doEdit' href='edit/"+nData.client_id+"/"+nData.id+"'><img src='<?php echo site_url('skins/img/pencil.png'); ?>'/></a>&nbsp;<a id='do_delete' href='#'><img src='<?php echo site_url('skins/img/cross.png') ?>'/></a>");
				},
				 "aoColumns": [
								  { "mDataProp": "id","sTitle": "#","bSortable" : false},
								  { "mDataProp": "project_name" , "sTitle": "Project Name"},
								  { "mDataProp": "company_name" , "sTitle": "Company Name"},
								  { "mDataProp": "comp_address" , "sTitle": "Company Address"},
								  { "mDataProp": "p_manager" , "sTitle": "Project Manager"},
								  { "mDataProp": "id", "sClass": "da-icon-column", "sTitle":"Action", "bSortable" : false}
							  ],
							
				
			
				});				
		});

		
	
</script>